<template>
  <div class="VehicleType">
    <!-- 6个入站车辆类型-->
    <div>
      <div class="top top1">
        <div class="top-text">
          <span class="top-text-name">小客车</span>
          <span class="top-text-num">{{setData(0)}}</span>
        </div>
        <div class="top-img">
          <img class="img-car" src="../../../../assets/img/ytfx/chuzu.svg" alt="">
        </div>
      </div>
      <div class="top top2">
        <div class="top-text">
          <span class="top-text-name">危化货车</span>
          <span class="top-text-num ">{{setData(4)}}</span>
        </div>
        <div class="top-img">
          <img class="img-car" src="../../../../assets/img/ytfx/huoche.svg" alt="">
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top-text">
        <div  class="top-text-name all-text">全部车辆</div>
        <span class="top-text-num big-text">{{serviceData.allNum}}</span>
      </div>
    </div>
    <div>
      <div class="bom bom1">
        <div class="top-text">
          <span class="top-text-name">大客车</span>
          <span class="top-text-num">{{setData(1)}}</span>
        </div>
        <div class="top-img">
          <img class="img-car" src="../../../../assets/img/ytfx/keche.svg" alt="">
        </div>
      </div>
      <div class="bom bom2">
        <div class="top-text">
          <span class="top-text-name">小货车</span>
          <span class="top-text-num">{{setData(3)}}</span>
        </div>
        <div class="top-img">
          <img class="img-car" src="../../../../assets/img/ytfx/xiaohuoche.svg" alt="">
        </div>
      </div>
      <div class="bom bom3">
        <div class="top-text">
          <span class="top-text-name">大货车</span>
          <span class="top-text-num">{{setData(2)}}</span>
        </div>
        <div class="top-img">
          <img class="img-car" src="../../../../assets/img/ytfx/cheliang-dahuoche.svg" alt="">
        </div>
      </div>
      <div class="bom bom4">
        <div class="top-text">
          <span class="top-text-name">牲畜车</span>
          <span class="top-text-num">{{ setData(5) }}</span>
        </div>
        <div class="top-img">
          <img class="img-car" src="../../../../assets/img/ytfx/huoche_1.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ParkingLotIndex",
  props:["serviceData"],
  data() {
    return {};
  },

  mounted() {},

  methods: {
    setData(type) {
      return this.serviceData.list.length > 0 ? this.serviceData.list[type].carNum:0;
    }
  },
};
</script>
<style scoped lang="scss">
.VehicleType {
  position: relative;
  height: 100%;
  width: 100%;
  .top {
    background-image: url("@/assets/img/VehicleType/other.png");
    width: 100px;
    height: 100px;
    /* 使背景图片铺满整个元素 */
    background-size: cover;
    /* 固定高度 */
    background-size: cover;
    /* 其他可能的背景样式 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    text-align: center;
    .top-img{
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 0;
      bottom: 10px;
      width: 100px;
      height: 100px;
      .img-car {
        height: 34px;
        width: 35px;
      }
    }
  }
  .top-text {
    margin-top: -10px;
      .top-text-name {
      }
      .top-text-num {
        color: #05f5fe;
        font-size: 18px;
      }
      .img-car {
        margin-left:15px;
        height: 34px;
        width: 35px;
      }
      .big-text{
        font-size: 24px;
      }
      .all-text{
        margin-top: -26px;
        background: #164A8A;
        // background: linear-gradient(to right, #091E54 0%,#0D3269 30%, #13518A 50%, #0D3269 70%,#091E54 100%);
        background: linear-gradient(to right, rgba(124,178,255,0.00), #13518A 50%, rgba(124,178,255,0.00) 100%);
        border-top: 1px solid #1785D0; /* 上边框 */
        border-bottom: 1px solid #1785D0; /* 下边框 */
        border-image: linear-gradient(to right, rgba(0,0,0,.1) 0%, #1785D0 50%, rgba(0,0,0,.1) 100%) 1;
        height: 25px;
        line-height: 25px;
        text-align: center;
        white-space: nowrap;       /* 确保文本不会换行 */
        overflow: hidden;          /* 隐藏超出容器的部分 */
        text-overflow: ellipsis;   /* 显示省略号 */
      }
    }
    
  .center {
    //background-image: url("@/assets/img/VehicleType/center.png");
    background-image: url("@/assets/img/MountingsStore/indicator2.png");
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: cover;
    width: 130px;
    height: 110px;
    text-align: center;
    position: absolute;
    left: calc(50% - 70px);
    top: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bom {
    background-image: url("@/assets/img/VehicleType/other.png");
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: cover;
    width: 100px;
    height: 100px;
    text-align: center;
    .top-img{
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 0;
      bottom: 10px;
      width: 100px;
      height: 100px;
      .img-car {
        height: 34px;
        width: 35px;
      }
    }
  }
  .top1 {
    position: absolute;
    left: 60px;
    top: 20px;
  }
  .top2 {
    position: absolute;
    left: 380px;
    top: 20px;
  }
  .bom1 {
    position: absolute;
    left: 30px;
    top: 130px;
  }
  .bom2 {
    position: absolute;
    left: 130px;
    top: 220px;
  }
  .bom3 {
    position: absolute;
    left: 310px;
    top: 220px;
  }
  .bom4 {
    position: absolute;
    left: 410px;
    top: 130px;
  }
}
</style>